<%@ page import="auctionhaus.Listing" %>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="main"/>
		<title>Welcome to AuctionHaus</title>

        <!-- auctionhaus css styles -->
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'auctionhaus.css')}" type="text/css">

        <!-- pull in javascript for sortable table -->
        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.7.1.min.js')}" ></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.tablesorter.js')}" ></script>

        <!-- initialize our sortable table -->
        <script type="text/JavaScript">
            $(document).ready(function()
                    {
                        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
                    }
            );
        </script>
	</head>
	<body>
        <div id="auctionhaus_header">
            <div id="createCustomer"><g:link url="http://localhost:8080/AuctionHaus/customer/create">Create Customer</g:link></div>
            <div id="logoText">AuctionHaus!</div>
        </div>
		<a href="#page-body" class="skip"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
		<div id="status" role="complementary">
			<h1>Categories</h1>
			<ul>
				<li><g:link url="http://localhost:8080/AuctionHaus/listing/list">All Listings</g:link></li>
				<li><g:link url="http://localhost:8080/AuctionHaus/bid/list">All Bids</g:link></li>
                <li><g:link url="http://localhost:8080/AuctionHaus/customer/list">All Customers</g:link></li>
			</ul>
		</div>
		<div id="page-body" role="main">
			<h1>Welcome to AuctionHaus</h1>
			<p>Thanks for stopping into the best online auction house in existence!</p>

			<div id="controller-list" role="navigation">
                <table id="myTable" class="tablesorter">
                    <thead>
                    <tr>
                        <g:sortableColumn property="name" title="${message(code: 'listing.name.label', default: 'Listing Name')}" />
                        <th># of Bids</th>
                        <g:sortableColumn property="startBid" title="${message(code: 'listing.startBid.label', default: 'Starting Bid')}" />
                        <g:sortableColumn property="endTime" title="${message(code: 'listing.endTime.label', default: 'End Date')}" />
                        <g:sortableColumn property="dateCreated" title="${message(code: 'listing.endTime.label', default: 'Date Created')}" />
                    </tr>
                    </thead>
                    <tbody>
                    <g:each in="${listingInstanceList}" status="i" var="listingInstance">
                        <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
                            <td><g:link url="http://localhost:8080/AuctionHaus/listing/show/${listingInstance.id}">${fieldValue(bean: listingInstance, field: "name")}</g:link></td>
                            <td>${listingInstance.bids.size()}</td>
                            <td>${fieldValue(bean: listingInstance, field: "startBid")}</td>
                            <td><g:formatDate format="dd-MMM-yyyy" date="${listingInstance.endTime}" /></td>
                            <td><g:formatDate date="${listingInstance.dateCreated}" /></td>
                        </tr>
                    </g:each>
                    </tbody>
                </table>
                <div class="pagination">
                    <g:paginate total="${listingInstanceTotal}" action="index"/>
                </div>
			</div>


		</div>

	</body>
</html>
